<template>
	<div class="myEvaluation">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<PublicTitle
		   :publictitle= 'publictitle'
		/>
		<div class="myEvaluationCont">
			<div class="myEvaluationDetail" v-for='(item,index) in myEvaluationArr' :key='index'>
				<div class="myEvaluationLeft">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="myEvaluationRight">
					<p>
						<span>{{ item.things }}</span>
						<span>交易已完成</span>
					</p>
					<p>
						<span>{{ item.introduce }}</span>
						<span>{{ item.details }}</span>
					</p>
					<p><span>￥{{ item.price }}</span></p>
					<p>
						<span>购买时间：{{ item.buyTime }}</span>
						<span>去评价</span>
					</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
import PublicTitle from './components/publictitle'
	export default{
		name:'myevaluation',
		components:{
			NewsHeader,
			PublicTitle
		},
		data(){
			return{
					dataArr:{
						isInput:false,
						iconArr:[
							{
								iconLeft:"icon-zuojiantou",
								iconRight:""
							}
						],
						placeholder:"我的评价",
						aimUrl:'/layout/mine',
						rightUrl:''
					},
					publictitle:[
						{
							titleleft:'待评价',
							titlelright:'已评价'
						}
					],
					myEvaluationArr:[
						{
							imgUrl:require('../../assets/images/mine/pingjia_01.png'),
							things:'电脑桌',
							// isTransact:'',
							introduce:'凡积简约现代 钢化玻璃电脑桌',
							details:'台式家用办公桌 简易学习书桌写字台',
							price:'198',
							buyTime:'2017/12/13'
							// goToAppraise:''
						},{
							imgUrl:require('../../assets/images/mine/pingjia_02.png'),
							things:'美式',
							// isTransact:'',
							introduce:'乡村全铜吊灯客厅灯具现代',
							details:'简约欧式复古大气创意卧室餐厅灯',
							price:'198',
							buyTime:'2017/12/13'
							// goToAppraise:''
						}
					]
			}
		}
	}
</script>
<style scoped lang="less">
.myEvaluation{
	width: 100%;
	min-height: 1334 / 100rem;
	padding-top: 88 / 100rem;
	background-color: #ededed;
	box-sizing: border-box;
	.myEvaluationCont{
		width: 100%;
		padding-top: 20 / 100rem;
		padding-left: 20 / 100rem;
		padding-right: 20 / 100rem;
		box-sizing: border-box;
		.myEvaluationDetail{
			width: 100%;
			height:250 / 100rem;
			background-color: #fff;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(255, 255, 255, 0.3);
			margin-bottom: 20 / 100rem;
			.myEvaluationLeft{
				margin-left: 20 / 100rem;
				margin-top: 36 / 100rem;
				margin-bottom: 36 / 100rem;
				margin-right: 20 / 100rem;
				img{
					width: 220 / 100rem;
					height: 177 / 100rem;
				}
			}
			.myEvaluationRight{
				width: 450 / 100rem;
				p:nth-child(1){
					margin-top: 36 / 100rem;
					span{
						font-size: 28 / 100rem;
					}
					span:nth-child(2){
						color: #ff5555;
						float: right;
						margin-right: 20 / 100rem;
					}
				}
				p:nth-child(2){
					span{
						display: block;
						font-size: 26 / 100rem;
						margin-top: 10 / 100rem;
						margin-bottom: 10 / 100rem;
					}
				}
				p:nth-child(3){
					margin-top: 20 / 100rem;
					margin-bottom: 15 / 100rem;
					span{
						color: #ff5555;
						font-weight: 600;
					}
				}
				p:nth-child(4){
					span:nth-child(2){
						display: inline-block;
						float: right;
						color: #ff5555;
						width: 106 / 100rem;
						height: 27 / 100rem;
						border: 2px solid #ff5555;
						text-align: center;
						line-height: 27 / 100rem;
						margin-right: 20 / 100rem;
					}
				}
			}
		}
		.myEvaluationDetail>div{
			float: left;
		}
	}
}	
</style>